<template>
  <div class="body">
    <!-- 遮罩层1 -->
    <van-overlay :show="show" @click="show = false">
      <div class="wrapper" @click.stop>
        <div class="block">
          <van-loading type="spinner" />
          定位中...
        </div>
      </div>
    </van-overlay>


    <!-- 导航栏 -->
    <div class="nav">
      <div class="cross" @click="onClickLeft"><van-icon name="cross" /></div>
      <div class="nav-city">当前位置-{{ this.value }}</div>
    </div>
    
    <!-- 输入框 -->
    <van-cell-group inset>
      <van-field
        v-model="value"
        left-icon="search"
        placeholder="输入城市名或拼音"
      />
    </van-cell-group>

    <div class="recommend-city">
      <div class="city-title">GIS定位你所在城市</div>
      <van-row>
        <van-col>
          {{ LocationCity }}
        </van-col>
      </van-row>
    </div>

    <div class="recommend-city">
      <div class="city-title">热门城市</div>
      <van-row>
        <van-col v-for="i in hotcity" :key="i.id" @click="handleclick(i.name)">
          {{ i.name }}
        </van-col>
      </van-row>
    </div>

    <!-- 索引栏 -->
    <!-- 注意：索引栏的遍历在indexbar上 -->
    <van-index-bar :index-list="indexList">
      <div v-for="(value, key) in lists" :key="key">
        <van-index-anchor :index="key"></van-index-anchor>
        <van-cell
          :title="i.name"
          v-for="(i, index) in value"
          :key="index"
          @click="handleclick(i.name)"
        ></van-cell>
      </div>
    </van-index-bar>
  </div>
</template>

<script>
export default {
  name: 'city',
  data() {
    return {
      value: '',
      hotcity: [],
      lists: {},
      indexList: [],
      show: true,
      // LocationProvince: '正在定位所在省', //给渲染层定义一个初始值
      LocationCity: '正在定位', //给渲染层定义一个初始值
    }
  },
  created() {
    this.$http.get('/city').then((res) => {
      this.lists = res.data.cities
      this.hotcity = res.data.hotCities
      //遍历对象获取属性名
      for (let item in this.lists) {
        this.indexList.push(item)
      }
    })
  },
  mounted() {
    this.city() //触发获取城市方法
  },
  methods: {
    onClickLeft() {
      this.$router.push('/films')
    },
    handleclick(name) {
      this.value = name
      this.$store.dispatch('handleclick', this.value)
      localStorage.setItem('city', this.value)
    },
    city() {
      //定义获取城市方法
      const geolocation = new BMap.Geolocation()
      var _this = this
      geolocation.getCurrentPosition(
        function getinfo(position) {
          let city = position.address.city //获取城市信息
          // let province = position.address.province //获取省份信息
          // _this.LocationProvince = province
          console.log(city)
          if (!_this.LocationCity) {
            _this.LocationCity = city
            _this.show = false
          } else {
            _this.LocationCity = '定位失败'
            _this.show = false
            _this.$dialog.alert({
              message: '获取定位失败，请手动选择城市'
            })
          }
        },
        function (e) {
          _this.LocationCity = '定位失败'
          _this.show = false
        },
        { provider: 'baidu' }
      )
    },
  },
}
</script>
<style>
.body {
  background-color: rgb(247, 248, 250);
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.block {
  width: 120px;
  height: 120px;
  background-color: #1e1c1c52;
  border-radius: 3px;
  padding: 20px;
  box-sizing: border-box;
  color: #fff;
  font-size: 14px;
  text-align: center;
}
.van-loading__spinner {
  margin: 20px;
}
.nav {
  background-color: rgb(255, 255, 255);
  color: #191a1b;
  width: 100vw;
  height: 44px;
  margin-bottom: 10px;
  z-index: 1;
}
.nav-city {
  display: inline-block;
  font-size: 17px;
  line-height: 44px;
  text-align: center;
  width: 100vw;
}
.cross {
  position: absolute;
  color: #191a1b;
  font-size: 24px;
  cursor: pointer;
  margin: 10px;
}
.recommend-city {
  font-size: 14px;
}
.recommend-city .city-title {
  margin: 10px 18px;
}
.van-row {
  background-color: #fff;
  padding: 20px 0;
  margin: 5px 0;
}
.van-row .van-col {
  height: 40px;
  width: 110px;
  margin: 20px 20px;
  background-color: rgb(247, 248, 250);
  line-height: 40px;
  text-align: center;
}
</style>
